@color-skyblue: #2d76fe; /* Leaderboard text, text color for 'selected' page */
@color-black: #000;
@background-fieldset: #7db1ff;
@border-color: #0066FF;
@landing-text: #06F;
@content-box: #accdff;
@game-activity: #03F;
@game-commitment: #2d76fe;
@game-event: #0CF;
@game-excursion: #FFF;
@game-special: #C18E22;

@image-background: "../images/bubbles.jpg";
@image-topnav-bg: "../images/960bkg-profile-topnav.png";
@image-smoke: "../images/smoke.png";
@image-gradient: "../images/gradient.png";
@image-gradient-sm: "../images/gradient-small.png";

@icon-getnuts: "../images/icon-scoreboard.png"; 
@icon-getnuts-hov: "../images/icon-scoreboard-over.png"; 
@icon-golow: "../images/icon-go-low.png"; 
@icon-golow-hov: "../images/icon-go-low-over.png"; 
@icon-news: "../images/icon-news.png"; 
@icon-news-hov: "../images/icon-news-over.png"; 
@icon-prizes: "../images/icon-prizes.png"; 
@icon-prizes-hov: "../images/icon-prizes-over.png"; 
@icon-profile: "../images/icon-profile.png"; 
@icon-profile-hov: "../images/icon-profile-over.png"; 
@icon-help: "../images/icon-help.png"; 
@icon-help-hov: "../images/icon-help-over.png"; 

@home-gradient-border: #A1A1A1;
@home-outset: #DDD;

@charset "utf-8";
/* Body Settings */
body { background: url("@{image-background}") fixed; } /* taken out background-size: cover to speed up testing (slow browser resizing) */
fieldset {background: @background-fieldset;}
a { color: @color-black; }

/* HEADER */
#header-logout a {color: @color-black; margin-top: -5px;}
#header {
  width: 926px; min-height: 126px;
  background: transparent url("@{image-topnav-bg}") top center no-repeat;
  margin: 1.7em auto 20px auto;
}
  /* LEADERBOARD */
  #header-user-points h3, #header-user-rank h3, #header-floor-points h3, #header-floor-rank h3, #header-floor-energy h3  {
    float: left;
    font: bold 18pt Arial, Helvetica, sans-serif;
    color: @color-skyblue;
    margin: 0;
    padding-right: 5px;
  }
  #header-info {
    width: 390px; height: 96px;	float: left;
    background: url("@{image-smoke}") repeat;
    padding: 5px; margin: 8px 5px 5px -8px;
    border: solid 1px @border-color;
    border-radius: 8px;	
  }

  /* NAVBAR */
  #header-nav-links {
    background: transparent url("@{image-smoke}");   	
    height: 75px;
    padding: 2px 2px 0 2px;
    float: right; margin-top: -113px; margin-right: 10px ; 
    border: solid 1px @border-color; border-radius: 6px;
  } 
  
  #underbar { 
    height: 23px; width: 378px; margin-top: -30px;
    background: url("@{image-smoke}") repeat;
    border: solid 1px @border-color;
    border-radius: 8px;
  }
	
    #header-nav-links ul li h4 { color: @color-black; margin: 0; padding: 0; margin-top: 2px; }
    #header-nav-links a {text-decoration: none;}
    #header-nav-links a:hover h4 { color: white; }
    .selected-news #header-nav-links a.news h4 { color: @color-skyblue; }
    .selected-activities #header-nav-links a.activities h4 { color: @color-skyblue; }
    .selected-energy #header-nav-links a.energy h4 { color: @color-skyblue; }
    .selected-help #header-nav-links a.help h4 { color: @color-skyblue; }
    .selected-prizes #header-nav-links a.prizes h4 { color: @color-skyblue; }
    .selected-profile #header-nav-links a.profile h4 { color: @color-skyblue; }
  
    /* These control which images are displayed (Nav bar) */
    #header-nav-links a.energy img {background: transparent url("@{icon-golow}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.energy:hover img {background: transparent url("@{icon-golow-hov}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.activities img {background: transparent url("@{icon-getnuts}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.activities:hover img {background: transparent url("@{icon-getnuts-hov}") top left no-repeat; width:54px; height: 54px; display: block;} 
    #header-nav-links a.news img {background: transparent url("@{icon-news}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.news:hover img {background: transparent url("@{icon-news-hov}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.help img {background: transparent url("@{icon-help}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.help:hover img {background: transparent url("@{icon-help-hov}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.profile img {background: transparent url("@{icon-profile}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.profile:hover img {background: transparent url("@{icon-profile-hov}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.prizes img {background: transparent url("@{icon-prizes}") top left no-repeat; width:54px; height: 54px; display: block;}
    #header-nav-links a.prizes:hover img {background: transparent url("@{icon-prizes-hov}") top left no-repeat; width:54px; height: 54px; display: block;}

/* QUEST BOX */
#spacer {height: 140px;}
#header #quest-box {background: url("@{image-gradient}"); color: @color-black; padding-top: 10px; border: @border-color 2px solid;}
#quest-list li a { color: @color-black; }

/*------- Box styles --------*/
.content-box { 
  background-color: @content-box; color: @color-black;
  border-radius: 8px;
  box-shadow: 3px 3px 8px @color-black;
  padding-bottom: 8px;
  margin-bottom: 15px;
}
.content-box-title {
  background: url("@{image-gradient-sm}"); 
  color: @color-black;
  height: 29px;	
  line-height: 29px;
  font-weight: bold;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: 1px solid @color-black;
  text-align: center;
}
.content-box th, .content-box td { background: @content-box; }
.alt-row { background: @background-fieldset; }

/* --- NEWS --- */
  
/* --- ABOUT --- */
#landing-page, #landing-about { border: 2px solid @landing-text; border-radius: 8px;}
#landing-about a { color: @landing-text;}

/* ---ACTIVITIES --- */
#activity-events-content th, #activity-scoreboard-content th { background: @background-fieldset; }
#activity-category .get-started, #activity-category .basic-energy, #activity-category .lights-out, #activity-category .make-watts, #activity-category .moving-on, #activity-category .opala, #activity-category .wet-wild, #activity-category .potpourri { background-color: @background-fieldset; }
.activity, .activity-legend { background-color: @game-activity; }
.commitment, .commitment-legend { background-color: @game-commitment; }
.event, .event-legend  { background-color: @game-event; }
.survey, .survey-legend { background-color: @game-special; }
.excursion, .excursion-legend { background-color: @game-excursion;}

/* --- ENERGY --- */
#energy-status-how-activities-table { border: 1px solid @background-fieldset;}
#energy-status-how-activities-table th { background: @background-fieldset; color: @color-black;}

/* --- PRIZES --- */
#prizes-list-table-header, #prizes-list-table-criteria-header { background: @background-fieldset; }
td.prize a{ color: @color-black; }
#prizes-raffle-info {
  background: url("@{image-gradient}");
  border: white solid 2px; border-radius: 8px;
}

/* --- PROFILE ---*/
#profile-form-table td.profile-section-header, #profile-badges-content h5, #profile-history-content h5 { background-color: @background-fieldset; }
#profile-form-submit a, #profile-badge-catalog a { color: @color-black;}

/* --- HALP --- */
.content-box-contents a { color: @color-black;}

/* --- HOME --- */
#spacerhome {height: 19px;}
#home-content{ background: url("@{image-smoke}") repeat; background-size: 100%; border: 2px solid @border-color; border-radius: 8px;}
#home-energy-icon, #home-energy-icon:hover, #home-activities-icon, #home-activities-icon:hover, #home-news-icon, #home-news-icon:hover, #home-prizes-icon, #home-prizes-icon:hover, #home-help-icon, #home-help-icon:hover, #home-profile-icon, #home-profile-icon:hover { border-radius:100px; /* borrowed sean chung's idea */}
.content .tile {
  border: 3px outset @home-outset;
  margin-top: -.5em;
  background-image: -moz-linear-gradient(100% 50% 90deg, @border-color, @home-gradient-border);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(@border-color), to(@home-gradient-border));	
  border-radius: 10px;
}
